<template>
	<view class="container">
		<uni-segmented-control
			:current="current"
			:values="items"
			style-type="text"
			active-color="#007aff"
			@clickItem="onClickItem"
		/>

		<view class="pb20"></view>

		<view class="list">
			<uni-card
				spacing="0"
				is-full
				:border="false"
				v-for="(item, index) in list"
				:key="index"
				@click="goPage(item)"
			>
				<template v-slot:title>
					<view class="slot-box">
						<uni-tag
							v-if="item.status == 0"
							text="未读"
							size="mini"
							type="error"
						/>
						<uni-tag
							v-if="item.status == 2"
							text="已读"
							size="mini"
							type="default"
						/>
						<text class="title">{{ item.name }}</text>
						<text class="extra">{{ item.createTime }}</text>
					</view>
				</template>
				<text>{{ item.content }}</text>
			</uni-card>
		</view>

		<view class="no-data" v-if="list.length == 0">暂无数据</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { getDjExamList, setDjRead } from '../../net/notice'

const current = ref(0)
const items = ref(['未读消息', '已读消息'])
const list = ref([])

onShow(() => {
	getList()
})

// 下拉刷新，获取最新的数据
onPullDownRefresh(() => {
	getList()
})

const onClickItem = e => {
	if (current.value !== e.currentIndex) {
		current.value = e.currentIndex
		getList()
	}
}

const getList = async () => {
	const status = current.value === 0 ? 0 : 2
	const params = { status }
	const { data } = await getDjExamList(params)
	if (data.length > 0) {
		list.value = data[0].djNoticeList
	} else {
		list.value = []
	}
	uni.stopPullDownRefresh()
}

const goPage = async item => {
	const { djNoticeId, type, djCostId, status } = item
	const url =
		type === 4
			? `../DJlilunceyan/detail?id=${djCostId}`
			: '../DJlilunceyan/index'
	uni.navigateTo({ url })
	status == '0' && (await setDjRead(djNoticeId + ','))
}
</script>

<style lang="scss">
@import '/static/common.scss';
.container {
	padding: 20px;
	padding-top: 10px;
	background-image: url('/static/login/bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.slot-box {
	padding: 7px 10px;
	background-color: #e6f5fe;
	.title {
		flex: 1;
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	.extra {
		font-size: 28rpx;
		color: #999;
	}
}
</style>
